// async异步函数，不会阻塞主线程，使页面不会卡住
async function getData() {
    // 通过fetch获取接口元素
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    console.log(response)
    const posts = await response.json();
    console.log(posts);
    // 获取root节点
    const root = document.querySelector("#root");
    // 创建ul节点
    const ul = document.createElement("ul");

    posts.forEach(posts => {
        // 创建li节点
        const li = document.createElement("li");
        // 创建a标签
        const anchor = document.createElement("a");
        // 为a标签添加文本createTextNode
        anchor.appendChild(document.createTextNode(posts.title));
        // 为a标签添加href属性
        anchor.setAttribute("href", `https://jsonplaceholder.typicode.com/posts/${posts.id}`);
        // 将a标签加在li标签中
        li.appendChild(anchor);
        //将li标签添加到ul标签下
        ul.appendChild(li);

    });
    // 将ul添加到root下
    root.appendChild(ul)
}

getData()